<template>
	<view class="count">
		<view class="swip">
			<u-swiper height="750" mode="number" indicator-pos="bottomRight" :list="list"></u-swiper>
		</view>
		<view class="price">
			<view class="pric f f-j-b">
				<view class="prc">
					<text>￥</text>{{obj.price||'--'}}
				</view>
				<view class="num">
					已售{{obj.sales||'--'}}件
				</view>
			</view>
			<view class="content">
				{{obj.name||'--'}}
			</view>
		</view>
		<view class="Specifications">
			<view @click="showPorp(1)" class="ficationsItem f f-a-c f-j-b">
				<view class="leftGui f f-a-c">
					<view class="gui">
						规格
					</view>
					<view class="value">
						<!-- {{specifications}} -->
						{{item.name||'请选择规格'}}
					</view>
				</view>
				<image src="/static/jiantou.png" class="jiantou" mode=""></image>
			</view>
			<view class="xian">

			</view>
			<view @click="showCenFn" class="ficationsItem f f-a-c f-j-b">
				<view class="leftGui f f-a-c">
					<view class="gui">
						说明
					</view>
					<!-- {{obj.intro||''}}v-html="obj.intro" -->
					<view class="value">
					</view>
				</view>
				<image src="/static/jiantou.png" class="jiantou" mode=""></image>
			</view>
		</view>
		<!-- 这个是评论 -->
		<view class="Appraise">
			<view class="top f f-a-c f-j-b">
				<view class="men">
					大家怎么说
				</view>
				<view @click="goDetil" class="number f f-a-c">
					{{obj.comment_num||'--'}}条评价 <image src="/static/jiantou.png" class="jianImg" mode=""></image>
				</view>
			</view>
			<view v-show="obj.comments[0]" class="touxiang f f-a-c f-j-b">
				<view class="avart f f-a-c">
					<image :src="obj.comments[0].user.avatar" class="avatImg" mode=""></image>
					<view class="name">
						<view class="names">
							{{obj.comments[0].user.nickname||'--'}}
						</view>
						<view class="time">
							{{$u.timeFormat(obj.comments[0].user.create_time, 'yyyy-mm-dd')}}
						</view>
					</view>
				</view>
				<view class="">
					<u-rate :count="count" inactive-color="#ebe2da" :disabled="true" active-color="#977961"
						v-model="obj.comments[0].stars"></u-rate>
				</view>
			</view>
			<view v-show="obj.comments[0]" class="conten">
				{{obj.comments[0].content}}
			</view>
			<view v-if="obj.comments[0]&&obj.comments[0].images" class="listImgs f f-a-c f-w-w">
				<view v-for="(item,index) in String(obj.comments[0].images).split(',')" :key="index" id="index"
					class="imgList">
					<image :src="item" @click="open($event,item)" class="xiaoImg" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view v-html="obj.intro" class="RichText"></view>
		<view class="bot">
			<view class="botBtn f f-a-c f-j-b">
				<view class="zuo ">
					<button :plain="true" open-type="contact" class="f f-d-c f-a-c f-j-c"
						style="padding: 0;margin: 0;border: none;">
						<image style="margin-top: 10rpx;" src="/static/shoop/kefu.png" class="img" mode=""></image>
						<text style="margin-top: -8rpx;" class="keName">
							客服
						</text>
					</button>
				</view>
				<view @click="goCat" class="zuo f f-d-c f-a-c f-j-c">
					<view class="icon f f-a-c f-j-c">
						{{shoopLiss}}
					</view>
					<image src="/static/shoop/02@2x.png" class="img" mode=""></image>
					<view class="keName">
						购物车
					</view>
				</view>
				<view v-if="obj.type==1" @click="showPorp(3)" class="addCat f f-a-c f-j-c">
					加入购物车
				</view>
				<view @click="showPorp(2)" :class="{liPays:obj.type!=1}" class="liPay f f-a-c f-j-c">
					立即购买
				</view>
			</view>
		</view>
		<u-popup mode="bottom" border-radius="40" v-model="show">
			<view class="detPorop">
				<view class="top f">
					<image :src="item.image" class="xiaoImg" mode=""></image>
					<view class="priceName">
						<view class="prices">
							¥ {{item.price||obj.price}}
						</view>
						<view class="detil">
							{{item.name||'请选择规格'}}
						</view>
					</view>
				</view>
				<!-- 下面的规格 -->
				<view class="Spec">
					<view v-for="(item,index) in sku" :key="index" class="specs">
						<view class="Packing">
							{{item.name}}
						</view>
						<view class="warp f f-a-c f-w-w">
							<view v-for="(ite,inde) in item.attributes" @click="xuanDetil(item,ite,index,inde)"
								:class="{active:ite.show}" :key="index" class="warpItem">
								{{ite.name}}
							</view>
						</view>
					</view>
				</view>
				<!-- 数量 -->
				<view class="numBer">
					<view class="num">
						数量
					</view>
					<view class="m-t-20">
						<u-number-box v-model="values" min="1" @change="valChange"></u-number-box>
					</view>
				</view>
				<view v-if="showProp==2" @click="BuyNow" class="BuyNow">
					立即购买
				</view>
				<view v-if="showProp==3&&obj.type==1" @click="jiaruGou" class="BuyNow">
					加入购物车
				</view>
				<view v-if="showProp==1" class="botton f f-a-c f-j-b">
					<view v-if="obj.type==1" @click="jiaruGou" class="cat">
						加入购物车
					</view>
					<view @click="BuyNow" :class="{pays:obj.type!=1}" class="pay">
						立即购买
					</view>
				</view>
				<image src="/static/Frame@2x(15).png" @click="chahao" class="cha" mode=""></image>
			</view>
		</u-popup>
		<u-popup mode="center" width="80%" border-radius="25" v-model="showCen">
			<!-- {{obj.intro||''}} -->
			<view v-html="obj.content" class="cenDeil p-25">
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showCen: false,
				obj: {},
				showProp: 0,
				values: 1,
				nameOne: '',
				nameTow: '',
				nameTree: '',
				nameForu: '',
				pricesList: [],
				sku: [],
				item: {}, //选择的价格item
				listBao: [{
					name: '包装',
					list: [{
						name: '1.8kg/袋',
						show: false
					}, {
						name: '1.8kg*4袋',
						show: false
					}, {
						name: '1.8kg*2袋',
						show: false
					}]
				}, {
					name: '口味',
					list: [{
						name: '鸡肉味',
						show: false
					}, {
						name: '鱼肉味',
						show: false
					}, {
						name: '鲜肉味',
						show: false
					}]
				}, {
					name: '口味',
					list: [{
						name: '鸡肉味',
						show: false
					}, {
						name: '鱼肉味',
						show: false
					}, {
						name: '鲜肉味',
						show: false
					}]
				}],
				attributes: [],
				show: false,
				counts: '56445646556456456565615615',
				count: 5,
				value: 2,
				CommodityDetails: '所有产品免运费，均由mecat仓库统一出库，付款后',
				specifications: '请选择商品规格',
				list: [],
				id: 0,
				shoopList: [],
				shoopLiss: '',
				token: uni.getStorageSync('token')
			}
		},
		onLoad(options) {
			this.id = options.id
			this.initShoop()
			this.initObj()
			this.addList()
		},
		onShareAppMessage() {


		},
		onShareTimeline() {},
		methods: {
			open(e, imgurl) {
				// console.log('--测试', event)
				uni.previewImage({
					current: imgurl,
					urls: [imgurl]
				});
			},

			// 获取地址
			async addList() {
				let token = uni.getStorageSync('token')
				if (token.length == 0) {
					return
				}
				let n = await this.$api.addressesList()
				let m = n.data.rows.filter(item => {
					if (item.defaulted) {
						return item
					}
				})
				if (m) {
					uni.setStorageSync('address', m[0])
				}
			},
			// 去购物车
			goCat() {
				if (!this.token) {
					return this.$msg('请先登录')
				}
				uni.navigateTo({
					url: '/pages/shoop/ShoppingCart'
				})
			},
			chahao() {
				this.show = false
			},
			// /点击加入购物车
			async jiaruGou() {
				if (!this.token) {
					return this.$msg('请先登录')
				}
				try {
					let n = await this.$api.addShoopList({
						num: this.values,
						product_id: this.id,
						price_id: this.item.id
					})
					this.$msg(n.msg)
					if (n.code == 200) {
						this.chahao()
						this.initShoop()
					}

				} catch (e) {
					//TODO handle the exception
					this.$msg('请选择')
				}
			},
			// /购物车列表
			async initShoop() {
				let n = await this.$api.shop_cartList()
				this.shoopList = n.data
				this.shoopLiss = n.data.length
			},
			showCenFn() {
				// console.log('11111111');
				this.showCen = true
			},
			async initObj() {
				let n = await this.$api.shoopHome({
					id: this.id
				})
				if (n.code != 200) {
					return this.$msg(n.msg)
				}
				let styledHtmls = ''
				let styledHtml = ''
				let regex = /<img([^>]*)>/g;
				if (n.data.content) {
					styledHtml = n.data.content.replace(regex, '<img$1 style="width: 100%; height: auto;">') ||
						'';
				}
				if (n.data.intro) {
					styledHtmls = n.data.intro.replace(regex, '<img$1 style="width: 100%; height: auto;">') ||
						'';
				}
				this.obj = n.data
				this.obj.content = styledHtmls || ''
				this.obj.intro = styledHtml || ''
				this.list = String(n.data.images).split(',')
				this.pricesList = n.data.prices
				this.item = {
					image: n.data.prices[0].image,
					name: '',
					id: '',
					price: ''
				}
				let m = n.data.skus.map(item => {
					console.log(item, '5555555555');
					let s = item.attributes.map((ite, ind) => {
						console.log(ite, '6666666666');
						return {
							name: ite,
							show: false
						}
					})
					return {
						attributes: s,
						name: item.name
					}
				})
				this.sku = m
			},
			// 立即购买
			BuyNow() {
				if (!this.token) {
					return this.$msg('请先登录')
				}
				try {
					if (!this.item.id) {
						return this.$msg('请选择规格')
					}
					if (this.values == 0) {
						return this.$msg('数量不能为0')
					}
					uni.navigateTo({
						url: `/pages/shoop/ConfirmTheOrder?type=${this.obj.type}&num=1&price=` + JSON.stringify([{
							id: this.item.id,
							num: this.values
						}])
					})
				} catch (e) {
					//TODO handle the exception
					this.$msg('请选择')
				}
			},
			goDetil() {
				if (!this.token) {
					return this.$msg('请先登录')
				}
				uni.navigateTo({
					url: '/pages/shoop/CommodityEvaluation?id=' + this.id
				})
			},
			//打开弹出层
			showPorp(num) {
				this.showProp = num
				this.show = true
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			xuanDetil(item, ite, index, inde) {
				console.log(index, '66666666666666');
				this.sku[index].attributes.forEach(item => {
					item.show = false
				})
				this.sku[index].attributes[inde].show = true
				if (index == 0) {
					this.nameOne = this.sku[index].attributes[inde].name
				} else if (index == 1) {
					this.nameTow = this.sku[index].attributes[inde].name
				} else if (index == 2) {
					this.nameTree = this.sku[index].attributes[inde].name
				} else if (index == 3) {
					this.nameForu = this.sku[index].attributes[inde].name
				}

				//这边是判断是否选择完然后筛选出来

				let n = [this.nameOne, this.nameTow, this.nameTree, this.nameForu]
				if (!this.nameOne) {
					n.splice(0, 1)
				} else if (!this.nameTow) {
					n.splice(1, 1)
				} else if (!this.nameTree) {
					n.splice(2, 1)
				} else if (!this.nameForu) {
					n.splice(3, 1)
				}
				let m = n.join('_')
				const filteredArr = n.filter((element) => element != '').join('_');
				console.log(filteredArr, '222222222222222');
				this.item = this.pricesList.filter(item => item.name == filteredArr)[0]
			}
		}
	}
</script>

<style lang="scss" scoped>
	img {
		max-width: 100% !important;
	}

	.cenDeil {
		max-height: 800rpx;
		max-width: 100%;
		line-height: 1.6;
		overflow-y: auto;
	}

	/deep/ .u-numberbox {
		border: 2rpx solid #ebe2da;
		height: 70rpx !important;
		border-radius: 20rpx !important;
	}

	/deep/ .u-icon-disabled {
		background: #fff !important;
		height: 100% !important;
	}

	/deep/ .u-number-input {
		background-color: transparent !important;
	}

	/deep/ .u-icon-plus {
		background-color: transparent !important;
	}

	/deep/ .u-icon-minus {
		background-color: transparent !important;
	}

	.botton {
		width: 100%;
		height: 96rpx;
		font-size: 32rpx;
		font-weight: 600;
		margin-top: 80rpx;

		.cat {
			width: 48%;
			height: 96rpx;
			line-height: 95rpx;
			border: 2rpx solid #977961;
			border-radius: 50rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 600;
			text-align: center;
			color: $brown;
		}

		.pay {
			width: 48%;
			height: 96rpx;
			line-height: 95rpx;
			border-radius: 50rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 600;
			background-color: $brown;
			text-align: center;
			color: #fff;
		}
	}

	.pays {
		width: 100% !important;
		height: 96rpx;
		line-height: 95rpx;
		border-radius: 50rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-500;
		font-weight: 600;
		background-color: $brown;
		text-align: center;
		color: #fff;
	}

	.BuyNow {
		width: 100%;
		height: 96rpx;
		line-height: 95rpx;
		background: $brown;
		border-radius: 48rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-500;
		font-weight: 600;
		text-align: center;
		color: $bai;
		margin-top: 80rpx;
	}

	.numBer {
		.num {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			text-align: LEFT;
			color: $hui;
		}
	}

	.Spec {
		.specs {

			margin: 30rpx 0;

			.Packing {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: $hui;
			}

			.warp {
				margin-top: 25rpx;

				.warpItem {
					margin-right: 24rpx;
					padding: 12rpx 24rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					text-align: CENTER;
					color: $hei;
					border: 2rpx solid $ebe2da;
					border-radius: 15rpx;
					margin-bottom: 15rpx;
				}
			}
		}
	}

	.detPorop {
		position: relative;
		padding: 40rpx;

		.cha {
			position: absolute;
			width: 48rpx;
			height: 48rpx;
			right: 20rpx;
			top: 20rpx;
		}

		.top {
			height: 192rpx;
			align-items: flex-end;

			.xiaoImg {
				width: 192rpx;
				height: 192rpx;
				border-radius: 16rpx;
				margin-right: 35rpx;
			}

			.priceName {
				width: 70%;

				.prices {
					font-size: 32rpx;
					font-family: HarmonyOS Sans, HarmonyOS Sans-700;
					font-weight: 700;
					text-align: LEFT;
					color: #2f2319;
				}

				.detil {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					text-align: LEFT;
					color: #ada6a0;
				}
			}
		}
	}

	.active {
		border: 1rpx solid $brown !important;
		color: $brown !important;
		background-color: #f4efea !important;
	}

	.bot {
		position: fixed;
		height: 180rpx;
		bottom: 0;
		width: 100%;
		background: #fffefc;
		padding: 20rpx 40rpx;

		.botBtn {
			.addCat {
				width: 228rpx;
				height: 88rpx;
				border: 2rpx solid $brown;
				border-radius: 46rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 500;
				text-align: center;
				color: $brown;
			}

			.liPay {
				width: 228rpx;
				height: 88rpx;
				background: $brown;
				border-radius: 44rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 500;
				text-align: LEFT;
				color: #ffffff;
			}

			.zuo {
				position: relative;

				.icon {
					width: 36rpx;
					height: 36rpx;
					background: $brown;
					border: 2rpx solid #ffffff;
					border-radius: 20rpx;
					position: absolute;
					top: -15rpx;
					right: -10rpx;
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC-500;
					font-weight: 500;
					text-align: center;
					color: #ffffff;
				}

				.img {
					width: 40rpx;
					height: 40rpx;
				}

				.keName {
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					text-align: center;
					color: #2f2319;
				}
			}
		}
	}

	.liPays {
		width: 456rpx !important;
		height: 88rpx !important;
		background: $brown;
		border-radius: 44rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-500;
		font-weight: 500;
		text-align: LEFT;
		color: #ffffff;
	}

	.RichText {
		margin-top: 20rpx;
		width: 100%;
	}

	.listImgs {
		margin-top: 20rpx;

		.imgList {
			width: 32%;
			margin-right: 2%;
			height: 214rpx;
			border-radius: 8rpx;
			overflow: hidden;
			margin-bottom: 15rpx;

			&:nth-child(3n) {
				margin-right: 0%;
			}

			.xiaoImg {
				width: 100%;
				height: 100%;
				object-fit: cover;

			}
		}
	}

	.conten {
		margin-top: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-400;
		font-weight: 400;
		text-align: LEFT;
		color: #2f2319;
		word-wrap: break-word;
	}

	.touxiang {
		margin-top: 40rpx;

		.avatImg {
			width: 72rpx;
			height: 72rpx;
			border-radius: 36rpx;
			margin-right: 24rpx;
		}

		.name {
			.names {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: LEFT;
				color: $hei;
				margin-bottom: 10rpx;
			}

			.time {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: $hui;
			}
		}
	}

	.Appraise {
		width: 100%;
		// height: 594rpx;
		background: #fffefc;
		border-radius: 40rpx;
		margin-top: 20rpx;
		padding: 40rpx;

		.top {
			.men {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: LEFT;
				color: $hei;
			}

			.number {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: $hui;

				.jianImg {
					width: 16rpx;
					height: 24rpx;
					margin-left: 15rpx;
				}
			}
		}
	}

	.Specifications {
		padding: 40rpx;
		border-radius: 40rpx;
		background: #fffefc;
		margin-top: 20rpx;

		.ficationsItem {
			.jiantou {
				width: 16rpx;
				height: 24rpx;
			}

			.leftGui {
				width: 90%;

				.gui {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-500;
					font-weight: 600;
					text-align: LEFT;
					color: $hei;
					margin-right: 48rpx;
				}

				.value {
					width: 80%;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-400;
					font-weight: 400;
					text-align: LEFT;
					color: $hui;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
		}

		.xian {
			width: 100%;
			height: 2rpx;
			background-color: #f1eeeb;
			margin: 30rpx 0;
		}
	}

	.price {
		width: 750rpx;
		height: 256rpx;
		background: #fffefc;
		border-radius: 0rpx 0rpx 40rpx 40rpx;
		padding: 40rpx;
		box-sizing: border-box;

		.content {
			box-sizing: border-box;
			margin-top: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 600;
			text-align: LEFT;
			color: #2f2319;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.pric {
			box-sizing: border-box;
			height: 64rpx;
			width: 100%;
			align-items: baseline;
			margin-bottom: 18rpx;

			.prc {
				box-sizing: border-box;
				font-size: 48rpx;
				font-family: HarmonyOS Sans, HarmonyOS Sans-700;
				font-weight: 700;
				text-align: CENTER;
				color: $brown;

				text {
					font-size: 32rpx;
				}
			}

			.num {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: $hui;
			}
		}
	}

	.count {
		height: 100vh;
		width: 100%;
		background-color: $f7f6f2;
		overflow-y: auto;
		padding-bottom: 200rpx;
	}
</style>